<template>
  <div class="main">
    <el-scrollbar>
      <el-container class="container" direction="vertical">
        <main-header></main-header>
        <div style="text-align:center">
          <el-container>
            <el-aside>
              <div class="menu-container" style="margin-top: 20px">
                <a-menu :default-selected-keys="['1']">
                  <a-menu-item key="1" @click="requireAudit()">
                    <a-icon type="apartment" />投稿审核
                  </a-menu-item>
                  <a-menu-item key="2" @click="requireManuscript()">
                    <a-icon type="apartment" />稿件管理
                  </a-menu-item>
                  <a-menu-item key="3" @click="requireUserList()">
                    <a-icon type="user" />用户列表
                  </a-menu-item>
                  <a-menu-item key="4" @click="requireBlackList()">
                    <a-icon type="user" />封禁列表
                  </a-menu-item>
                </a-menu>
              </div>
            </el-aside>
            <el-main>
              <div style="min-width: 950px; max-width: 1500px;">
                <component v-if="true" :is="this.managerbody"></component>
              </div>
            </el-main>
          </el-container>
        </div>
      </el-container>
      <el-backtop target=".el-scrollbar__wrap"></el-backtop>
    </el-scrollbar>
  </div>
</template>

<script>
import MainHeader from '@/components/MainHeader.vue'
import Manuscripts from '@/components/Manager/AuditManuscripts.vue'
import UserList from '@/components/Manager/UserList.vue'
import BlackList from '@/components/Manager/BlackList.vue'
import ManageRoute from '@/components/Manager/ManageRoute.vue'

export default {
  components: { MainHeader, Manuscripts, UserList, BlackList, ManageRoute },
  data() {
    return {
      managerbody: 'Manuscripts'
    }
  },
  methods: {
    requireAudit() {
      this.managerbody = "Manuscripts";
    },
    requireManuscript() {
      this.managerbody = "ManageRoute";
    },
    requireUserList() {
      this.managerbody = "UserList";
    },
    requireBlackList() {
      this.managerbody = "BlackList";
    },
  }
}
</script>

<style scoped>
.main {
  height: 100%;
  width: 100%;
}

.el-scrollbar {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-x: hidden;
}

:deep .el-scrollbar__wrap {
  height: 100%;
  overflow: scroll;
  overflow-x: hidden !important;
}
</style>